<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>监听器</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <!-- 
        监听器
        注意点：
            a. 监听器不分全局和局部；
            b. 监听器（watch）有什么作用？
                用于监听/观察data属性中的数据的变化的。
            c. 语法：
                new Vue({
                    el....
                    data....
                    methods....
                    computed....
                    watch: {
                        数据名: function...,
                        数据名: function...,
                        .....
                    }
                })
                function是有形参的：改变后的值,改变前的值
            d. 监听器默认只能监听常规的字面量，对于对象形式的数据，是无法监听其内部的更改。
                如果需要监听对象内部的更改则需要使用深度监听（deep watch）
     -->
    <div id="app">
        <!-- 案例：给定三个输入框，第一个为姓输入框，第二个为名输入框，第三个为姓名组合结果框；要求当用户更新姓或名后，第三个输入框自动生成完整的姓名结果。 -->
        <div>
            <div><input type="text" placeholder="first name" v-model="firstName" /></div>
            <div><input type="text" placeholder="last name" v-model="lastName" /></div>
            <div><input type="text" placeholder="full name" v-model="fullName" /></div>
        </div>
        <!-- 对象形式 -->
        <div>
            <div><input type="text" placeholder="first name" v-model="obj.firstName" /></div>
            <div><input type="text" placeholder="last name" v-model="obj.lastName" /></div>
            <div><input type="text" placeholder="full name" v-model="obj.fullName" /></div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                firstName: "",
                lastName: "",
                fullName: "",
                // 对象形式
                obj: {
                    firstName: "",
                    lastName: "",
                    fullName: ""
                }
            },
            // 监听器
            watch: {
                // 监听器的属性名必须与data中的一致
                firstName: function (newVal, oldVal) {
                    // console.log('firstname变了');
                    this.fullName = newVal + this.lastName
                },
                lastName: function (newVal, oldVal) {
                    // console.log('lastname变了');
                    this.fullName = this.firstName + newVal
                },
                // 监听对象（这个监听器是对象中所有数据公用的）
                obj: {
                    // 是否开启深度监听
                    deep: true,
                    // 监听器的处理程序，函数名我们没有选择的权力
                    // 虽然处理程序也有2个参数，但是由于对象是引用类型，因此公用一个内存地址。当新的值产生后，旧值也就变成了新值了
                    handler(val) {
                        // console.log('触发了公共的监听器');
                        // this.obj.fullName = val.firstName + val.lastName
                        val.fullName = val.firstName + val.lastName
                    }
                }
            }
        })
    </script>
</body>

</html>